<template>
  <m-modal
    v-model="visible"
    title="样式"
    okText="确定"
    :width="400"
    :mask="true"
    @ok="handleOk"
    @cancel="handleCancel">
    <div class="g-pd-lr-24 g-pd-tb-10 wrapper" >
      <div class="title">线</div>
      <a-input v-model="colorValue" type="color" style="width:68px;margin-right:8px"></a-input>
      <a-select v-model='borderValue' style="width:200px">
        <a-select-option value="solid">
          实线
        </a-select-option>
        <a-select-option value="dashed">
          虚线
        </a-select-option>
        <a-select-option value="dotted">
          点线
        </a-select-option>
        <!-- <a-select-option value="3">
          点点线
        </a-select-option> -->
      </a-select>
    </div>
    <div class="g-pd-lr-24 g-pd-tb-10 wrapper">
      <div class="title">预览</div>
      <div class="preview">
        <div class="line" :style="{borderBottomStyle:borderValue,borderBottomWidth:'3px',borderBottomColor:colorValue}"></div>
      </div>
    </div>
  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import Modal from 'src/components/common/CustomModal';

const comp = {
  name: 'comp-color-picker-modal',
  components: {
    'm-modal': Modal
  },
  props: {

    line: Object,
  },
  mounted() {
    
    this.visible = true;
    this.colorValue = this.line.style.color;
    this.borderValue = this.line.style.border;
  },
  data() {
    return {
      visible: false,
      text: "",
      colorValue: "",
      borderValue: ""
    };
  },
  
  methods: {
    handleOk(){
      this.$emit('sure', { 
        color: this.colorValue,
        border: this.borderValue
      });
    },
    handleCancel(){
      this.visible = false;
      this.$emit('close');
    },
    colorChange(value){
      console.log(value);
    }
  }
};
export default comp;
export const colorPickerModal = new Portal(comp);
</script>
<style lang="scss" scoped>
.title{
  font-size: 14px;
  font-weight: 600;
}
.wrapper{
  border-bottom: 1px solid #E4E3E3;
}
.preview{
  width:301px;
  height: 56px;
  border-radius: 0px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 25px;
  .line{
    height: 3px;
    width: 100%;
  }
}
</style>